import { ITextSlot } from 'office-ui-fabric-react/lib/Text';
import { IComponent, IComponentStyles, IHTMLSlot, IStyleableComponentProps } from '../../Foundation';

/**
* {@docCategory {{componentName}}}
*/
export type I{{componentName}}Component = IComponent<I{{componentName}}Props, I{{componentName}}Tokens, I{{componentName}}Styles>;

// The following two types are redundant with I{{componentName}}Component but are needed until TS function return widening issue is resolved:
// https://github.com/Microsoft/TypeScript/issues/241
// For now, these helper types can be used to provide return type safety for tokens and styles functions.

/**
* {@docCategory {{componentName}}}
*/
export type I{{componentName}}TokenReturnType = ReturnType<Extract<I{{componentName}}Component['tokens'], Function>>;

/**
* {@docCategory {{componentName}}}
*/
export type I{{componentName}}StylesReturnType = ReturnType<Extract<I{{componentName}}Component['styles'], Function>>;

/*
* Optional interface to use for componentRef. This should be limited in scope with the most common scenario being for focusing elements.
* @{docCategory {{componentName}}}
*/
export interface I{{componentName}} { }

/**
* {@docCategory {{componentName}}}
*/
export interface I{{componentName}}Slots {
  // All props for your component are to be defined here.
  /**
   * Root element.
   */
  root?: IHTMLSlot;

  /**
   * Component sample prop. If provided, component is controlled.
   * @defaultValue defaultText
   */
  text?: ITextSlot;
}

/**
* Extending IStyleableComponentProps will automatically add styleable props for you, such as styles and theme.
* If you don't want these props to be included in your component, just remove this extension.
* {@docCategory {{componentName}}}
*/
export interface I{{componentName}}Props extends
  I{{componentName}}Slots,
  IStyleableComponentProps<I{{componentName}}Props, I{{componentName}}Tokens, I{{componentName}}Styles> {
  // All props for your component are to be defined here.
  /**
   * Component sample props.
   */
  clicks?: number;
  onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
  warning?: boolean;
}

/**
* {@docCategory {{componentName}}}
*/
export interface I{{componentName}}Tokens {
  // Define tokens for your component here. Tokens are styling 'knobs' that your component will automatically
  // apply to styling sections in the styles file.
  textColor?: string;
}

/**
* {@docCategory {{componentName}}}
*/
export type I{{componentName}}Styles = IComponentStyles<I{{componentName}}Slots>;
